import React from 'react'
import { Button, Table, Modal, Form, Row, Col, Input, Select, message, Popconfirm, Radio, TreeSelect } from 'antd';
import './Type.scss';
import {
  getTypeList,
  deleteType,
  addType,
  editType,
  getModalList,
  getVideoPlateList,
  getConfig,
  UrlConfig,
  banmianList
} from '../../../services/fetch';
import { connect } from "dva";
import { random } from '../../../utils/Date';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TreeNode } = TreeSelect;

@connect(({ video }) => ({
  video,
}))
@connect(({ add }) => ({
  add,
}))
class Type extends React.PureComponent {

  state = {
    selectedRowKeys: [],
    typeList: [],
    visible: false,
    visible2: false,
    typeId: [],
    edit: [],
    modalOption: [],
    chooseTemplate: 0,
    treeData: [],
    module_name: '',
    provinceData: [],
    configJson: {},
    zhibobanmian: [],
    extend_style: {},
    template_id: null,
    permission: []
  };

  componentDidMount() {
    getConfig().then((res) => {
      if (res.data.code == 200) {
        // console.log(res);
        this.setState({
          configJson: res.data.data.config_json
        })
        this.setState({
          permission: JSON.parse(localStorage.getItem('permissionzx')) || []
        })
      }

    })

    this.getList()
    this.getModalOption()
    this.props.dispatch({ type: 'video/videoTemplateList' })
    let modal = this.props.video.loginModal
    let arr = []
    if (modal.module_list) {
      modal.module_list.map((item, index) => {
        if (item.module_name === 'fcvideo') {
          arr.push('fcvideo')
        }
        if (item.module_name === 'fcfind') {
          this.props.dispatch({ type: 'video/getFcfind' })
          arr.push('fcfind')
        }
      })
      this.setState({
        provinceData: arr
      })
    }

  }


  getVersion = (page) => {
    let { dispatch } = this.props;
    dispatch({
      type: 'video/getVersion',
      data: {

      }
    })
  }
  // componentWillUnmount(){
  //     window.clearTimeout(this.timess)
  // }
  /**
   * 弹出模态框 新增  和 修改
   */
  showModal = () => {
    this.setState({
      visible: true,
      chooseTemplate: 0
    })
    this.getVersion()
  }
  showModalEdit = (edit) => {
    console.log(edit);
    // if (edit.plate_module_name) {
    //     this.setState({
    //         chooseTemplate: 2,
    //         module_name: edit.plate_module_name
    //     })
    //     switch (edit.plate_module_name) {
    //         case 'fcvideo':
    //             this.setState({
    //                 treeData: this.props.video.videoTemplateList
    //             })
    //             break;
    //         case 'fcfind':
    //             this.setState({
    //                 treeData: this.props.video.fcfindTreeList,
    //             })
    //             break;
    //         default:
    //             break;
    //     }
    // }
    // this.setState({
    //     chooseTemplate: 1
    // })
    // if (edit.template_id) {
    //     this.setState({
    //         chooseTemplate: 1
    //     })
    // }

    let extendStyle = edit.extend_style && JSON.parse(edit.extend_style)
    console.log(extendStyle)

    this.formRef2.props.form.setFieldsValue(edit);
    this.setState({
      extend_style: extendStyle,
      template_id: edit.template_id,
      visible2: true,
      edit: [edit]
    })
  }
  /**
   * 新建分类
   */
  handleCreateAdd = (e) => {
    e.preventDefault();
    this.formRef.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // if (this.state.chooseTemplate === 2) {
        //     values["plate_module_name"] = this.state.module_name
        //     delete values["template_id"]
        // }
        console.log(this.formRef.state);
        values.extend_style = this.formRef.state.extend_style;
        addType(values).then((res) => {
          if (res.data.code === 200) {
            message.success('新建成功！');
            this.formRef.props.form.resetFields();
            this.getList();
            this.setState({
              visible: false,
            });
          } else {
            message.error(res.data.msg)
          }
        })
      }
    });
  }
  /**
   * 修改分类
   */
  handleCreateEdit = (e) => {
    e.preventDefault();
    this.formRef2.props.form.validateFieldsAndScroll((err, values) => {
      let id = this.state.edit[0].plate_id
      let data = values;
      data["plate_id"] = id;
      if (this.state.chooseTemplate === 1) {
        values["plate_module_name"] = this.state.module_name
        delete values["template_id"]
      }
      if (this.formRef2.state && JSON.stringify(this.formRef2.state.extend_style) !== '{}') {
        data['extend_style'] = this.formRef2.state && this.formRef2.state.extend_style
      }
      editType(data).then((res) => {
        if (res.data.code === 200) {
          message.success('修改成功！');
          this.getList();
          this.setState({
            visible2: false
          });
        } else {
          message.error(res.data.msg)
        }
      })
    })
  }
  //modal 控制
  handleCancel = (e) => {
    this.setState({
      visible: false
    });
  }
  handleCancelEdit = (e) => {
    this.setState({
      visible2: false
    });
  }
  /**
 * 上传插件
 */
  fcUpload = (key, action) => {
    window.fc = new window.FcUpload({
      elem: 'fcUpload',
      oss: this.props.add.configJson.aliyunOssSwitch,       //是否为oss 上传
      multiple: false,  //是否允许上传多个文件
      type: 'img', // 上传文件类型\ img 图片，  video 视频
      actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`,  //本地上传图片地址
      actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`,  //本地上传视频地址
      actionOss: this.props.add.configJson.actionOss,  //后端认证接口，获取临时上传凭证
      endpoint: this.props.add.configJson.endpoint,
      bucket: this.props.add.configJson.bucket,
      customDomain: this.props.add.configJson.customDomain,
      ossConfig: this.props.add.configJson,
      callback: (callRes) => {
        let url;
        if (callRes.oss) {  // oss 和本地返回数据结构不一样
          url = callRes.response[0];
        } else {
          url = callRes.response[0].data;
        }
        let obj = {}
        obj[key] = url;
        if (action == 'add') {
          this.formRef.props.form.setFieldsValue(obj)
        } else if (action == 'edit') {
          this.formRef2.props.form.setFieldsValue(obj)
        }

      }
    })

    window.fc.show();
  }
  /**
   * 获取分类 数据
   */
  getList = () => {
    getTypeList().then((res) => {
      let data = res.data.data
      let newData = []
      let typeId = []
      data.map((item, index) => {
        if (item.children) {
          item.children.map((i, ind) => {
            i["key"] = ind + 1 + 10 * (index + 1)
          })
        }
        let disabled = false;
        if (item.is_other || item.url) {
          disabled = true
        }
        let obj = {
          key: index + 1,
          plate_id: item.plate_id,
          plate_name: item.plate_name,
          sub_plate_name: item.sub_plate_name,
          create_time: item.create_time,
          children: item.children,
          template_id: item.template_id,
          plate_module_name: item.plate_module_name,
          plate_module_id: item.plate_module_id,
          is_show: item.is_show,
          is_show_header: item.is_show_header,
          page_size: item.page_size,
          is_authorize: item.is_authorize,
          authorize_code: item.authorize_code,
          url: item.url,
          back_color: item.back_color,
          extend_style: item.extend_style,
          is_other: item.is_other
        }
        let objId = {
          plate_id: item.plate_id,
          plate_name: item.plate_name,
          sub_plate_name: item.sub_plate_name,
          disabled: disabled
        }
        newData[index] = obj
        typeId[index] = objId
      })
      console.log(newData)
      this.setState({
        typeList: newData,
        typeId: typeId
      })
    })
  }

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }
  /**
   * 删除单个 分类
   */
  delete = (record) => {
    let id = {
      plate_id: record.plate_id
    }
    deleteType(id).then((res) => {
      if (res.data.code === 200) {
        message.success('删除成功！');
        this.getList();
      } else {
        message.error(res.data.msg);
      }
    })
  }
  saveFormRef = (formRef) => {
    this.formRef = formRef;
  }
  saveFormRef2 = (formRef) => {
    this.formRef2 = formRef;
  }
  /**
   * 模板数据列表
   */
  getModalOption = () => {
    getModalList().then((res) => {
      if (res.data.code === 200) {
        this.setState({
          modalOption: res.data.data
        })
      }
    })
  }
  /**
   * 新建控制
   */
  changeTrmplate = (e) => {
    this.setState({
      chooseTemplate: e.target.value
    })
    let arr = this.state.provinceData
    if (arr[0] === 'fcvideo') {
      this.setState({
        treeData: this.props.video.videoTemplateList,
        module_name: 'fcvideo'
      })
    } else {
      this.setState({
        treeData: this.props.video.fcfindTreeList,
        module_name: 'fcfind'
      })
    }
  }
  /**
   * 其他组件change事件
   */
  handleProvinceChange = (value) => {
    this.setState({
      module_name: value
    })
    switch (value) {
      case 'live':
        this.formRef.props.form.setFieldsValue({
          pid: '0'
        })
        break;
      case 'none':

        break;
    }

    // this.setState({
    //     module_name: value
    // })
    // this.formRef.props.form.setFieldsValue({
    //     plate_module_id: ''
    // })
    // this.formRef2.props.form.setFieldsValue({
    //     plate_module_id: ''
    // })

    // switch (value) {
    //     case 'fcvideo':
    //         this.setState({
    //             treeData: this.props.video.videoTemplateList
    //         })
    //         return
    //         break;
    //     case 'fcfind':
    //         this.setState({
    //             treeData: this.props.video.fcfindTreeList,
    //         })
    //         return
    //         break;
    //     default:
    //         break;
    // }
  }
  /**
   * 重置级联第二个表单
   */
  render() {
    const { selectedRowKeys } = this.state;

    const quanxian = this.props.video.quanxian;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const columns = [
      {
        title: 'id',
        dataIndex: 'plate_id',
        width: 100,
      }, 
      {
        className: 'mon_text',
        title: '版面名称',
        dataIndex: 'plate_name',
      }, 
      {
        title: '创建时间',
        dataIndex: 'create_time',
      }, 
      {
        title: '操作',
        render: (text, record, index) => {

          return (
            <div>

              <a style={{ marginRight: '10px' }} onClick={() => this.showModalEdit(record)}>修改</a>

              <Popconfirm title="确定删除?" icon={null} onConfirm={() => this.delete(record)} okText="确定" cancelText="取消">
                <a >删除</a>
              </Popconfirm>

            </div>
          )
        }
      }
    ];
    const total = 10;
    return (
      <section id='type' style={{ width: '100%', height: '100%' }}>
        <header> 版面管理 </header>
        <div className='content'>
          <div className='btn_group'>
            <Button class='mon_btn' type="defualt" onClick={this.showModal}>ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ ᠪᠠᠢᠭᠤᠯᠬᠤ</Button>
            {/* <Button type="defualt">删除</Button> */}
          </div>
          <div class='table'>
            <Table
              className='mon_table'
              rowSelection={rowSelection}
              columns={columns}
              dataSource={this.state.typeList}
            // pagination={{
            //     total: total, //数据总数量
            //     size: 'small',
            //     showQuickJumper: true,
            //     pageSize: 10,  //显示几条一页
            //     defaultPageSize: 10, //默认显示几条一页
            //     showSizeChanger: true,  //是否显示可以设置几条一页的选项
            //     style: {marginRight:'50px'},
            //     showTotal: (total)=>{  //设置显示一共几条数据
            //       return `共有${total}数据`
            //       }
            //   }}
            />
          </div>
        </div>
        {/* modal */}
        <AddForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreateAdd}
          optionList={this.state.typeId}
          modalOption={this.state.modalOption}
          changeTrmplate={this.changeTrmplate}
          chooseTemplate={this.state.chooseTemplate}
          treeData={this.state.treeData}
          configJson={this.state.configJson}
          provinceData={this.state.provinceData}
          handleProvinceChange={this.handleProvinceChange}
          versionJson={this.props.video.versionJson}
          getVersion={this.getVersion}
          fcUpload={this.fcUpload}
          permission={this.state.permission}
        />
        <EditForm
          wrappedComponentRef={this.saveFormRef2}
          visible={this.state.visible2}
          onCancel={this.handleCancelEdit}
          onCreate={this.handleCreateEdit}
          modalOption={this.state.modalOption}
          module_name={this.state.module_name}
          chooseTemplate={this.state.chooseTemplate}
          edit={this.state.edit}
          treeData={this.state.treeData}
          configJson={this.state.configJson}
          provinceData={this.state.provinceData}
          handleProvinceChange={this.handleProvinceChange}
          fcUpload={this.fcUpload}
          extendStyle={this.state.extend_style}
          template_id={this.state.template_id}
          optionList={this.state.typeId}
          permission={this.state.permission}
        />
      </section>
    )
  }
}

export default Type;


const EditForm = Form.create()(
  class extends React.Component {

    state = {
      extend_style: {}
    }

    random = () => {
      this.props.form.setFieldsValue({
        authorize_code: random() + random()
      })
    }
    authorizeChange = () => {
      const formValue = this.props.form.getFieldsValue();
      if (!formValue.authorize_code) {
        setTimeout(() => {
          this.props.form.setFieldsValue({
            authorize_code: random() + random()
          })
        }, 300)
      }
    }

    handleCancel = () => {
      this.setState({
        extend_style: {}
      })
      this.props.onCancel()
    }


    render() {
      const { permission, visible, onCancel, onCreate, form, modalOption, chooseTemplate,
        module_name, treeData, provinceData, handleProvinceChange, fcUpload, configJson, extendStylePro, template_id, optionList } = this.props;
      const { getFieldDecorator } = form;
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };

      const formValue = this.props.form.getFieldsValue();

      let flag = true;
      if (this.props.edit.length == 0) {
        flag = false
      } else {
        if (this.props.edit[0].hasOwnProperty('pid')) {
          flag = false;
        }
      }

      let viewStyle = [];

      if (!this.state.extend_style || JSON.stringify(this.state.extend_style) == '{}') {

        var extendStyle = extendStylePro;
        if(!extendStyle ||  JSON.stringify(extendStyle) == '{}'){
          extendStyle ={
            row: 2,
            widthHeight: "1"
          };

        }else{
          if(!('widthHeight' in extendStyle)){
            extendStyle.widthHeight = "1";
          }
          // if(!('row' in extendStyle)){
          //   extendStyle.row = 2;
          // }
        }

        let { widthHeight: wh, row } = extendStyle;

        wh = wh - 0
        row = row - 0
        let w = 100;
        if (row == 1) {
          w = w * 1;
        } else if (row == 2) {
          w = w * 0.5;
        } else if (row == 3) {
          w = w * 0.33;
        }
        console.log(w * wh, row)
        for (let i = 0; i < row; i++) {
          viewStyle.push(<div key={i} className="viewStyle" style={{ height: w * wh, width: w }}></div>)
        }

      } else {
        //编辑的时候this.state.extend_style本来就是空，这里的逻辑根本进不来，没用
        let extend_style_json = this.state.extend_style;

        if(!extend_style_json.widthHeight){
          extend_style_json.widthHeight = "1";

        }
        let { widthHeight: wh, row } = extend_style_json;

        wh = wh - 0
        row = row - 0
        let w = 100;
        if (row == 1) {
          w = w * 1;
        } else if (row == 2) {
          w = w * 0.5;
        } else if (row == 3) {
          w = w * 0.33;
        }
        console.log(w * wh, row)
        for (let i = 0; i < row; i++) {
          viewStyle.push(<div key={i} className="viewStyle" style={{ height: w * wh, width: w }}></div>)
        }
      }



      return (
        <Modal
          title="修改"
          visible={visible}
          onCancel={this.handleCancel}
          onOk={onCreate}
          width={1100}
          footer={[
            // 重点：定义右下角 
            <Button className='mon_btn' onClick={this.handleCancel}>ᠬᠠᠭᠠᠬᠤ</Button>,
            <Button className='mon_btn' type="primary" onClick={onCreate}>ᠵᠠᠰᠠᠬᠤ</Button>
          ]}
        >
          <Form>
            <Row gutter={24}>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ"
                >
                  {getFieldDecorator('plate_name', {
                    rules: [{
                      required: true, message: '请输入版面名称',
                    }],
                  })(
                    <Input mon_class='mon_input' />
                  )}
                </FormItem>
              </Col>
              {
                configJson && configJson.is_mengwen ?
                  <Col span={2}>
                    <FormItem
                      {...formItemLayout}
                      mon_class='mon_label'
                      label="ᠮᠣᠩᠭᠤᠯ ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ"
                    >
                      {getFieldDecorator('sub_plate_name', {})(
                        <Input mon_class='mon_input' />
                      )}
                    </FormItem>
                  </Col>
                : null
              }
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠡᠷ᠎ᠡ ᠢᠯᠡᠷᠡᠭᠦᠯᠬᠦ ᠡᠰᠡᠬᠥ"
                >
                  {getFieldDecorator('is_show_header', {
                    initialValue: 1,
                    rules: [{
                      required: true, message: '请选择是否显示版面名称',
                    }]
                  })(
                    <Radio.Group>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={0}>ᠪᠢᠱᠢ</Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              </Col>
              
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠪᠤᠰᠤᠳ ᠲᠣᠨᠤᠭᠯᠠᠯ : "
                >
                  {getFieldDecorator('is_other', {
                    initialValue: 0,
                    rules: [{
                      required: true,
                    }],
                  })(
                    <RadioGroup disabled>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={0}>ᠪᠢᠱᠢ</Radio>
                      {/*<Radio value={2}>URL</Radio>*/}
                    </RadioGroup>
                  )}
                </FormItem>
              </Col>
              

              {/* <div style={{width:'100%',marginBottom:'20px',marginLeft:'30px'}}>
                              <RadioGroup  value={chooseTemplate} >
                                  <Radio value={1}>当前组件样式</Radio>
                                  <Radio value={2}>其他组件分类</Radio>
                              </RadioGroup>
                          </div> */}

              <Col span={2} style={template_id == null ? { display: 'none' } : {}}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠶᠠᠩᠵᠤ ᠰᠣᠩᠭᠤᠬᠤ ᠄ "
                  style={template_id == null ? { display: 'none' } : {}}
                >
                  <div mon_class='mon_select'>
                    {getFieldDecorator('template_id', {
                      rules: [{
                        required: true, message: '请选择样式',
                      }],
                    })(
                      <Select>
                        {
                          modalOption.map((item, index) => {
                            return (
                              <Option key={index} value={item.template_id}>{item.template_name}</Option>
                            )
                          })
                        }
                      </Select>
                    )}
                  </div>
                </FormItem>
              </Col>
              
              <Col span={2} style={formValue.template_id == 17 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠥᠷᠭᠡᠨ ᠥᠨᠳᠦᠷ ᠬᠠᠷᠢᠴᠠᠯ : "
                  style={formValue.template_id == 17 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div mon_class='mon_select'>
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      onChange={(v) => {
                        let extend_style = { ...(this.state.extend_style || extendStyle), widthHeight: v }
                        this.setState({ extend_style: extend_style })
                      }}
                      value={this.state.extend_style.widthHeight || extendStyle.widthHeight}
                    >
                      <Option value="1">1:1</Option>
                      <Option value="0.75">4:3</Option>
                      <Option value="0.56">16:9</Option>
                    </Select>
                  </div>
                </FormItem>
              </Col>
              
              <Col span={2} style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠮᠥᠷ ᠪᠦᠷᠢ᠎ᠶᠢᠨ ᠦᠵᠡᠭᠦᠯᠦᠯᠭᠡ : "
                  style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div mon_class='mon_select'>
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      onChange={(v) => {
                        let extend_style = { ...(this.state.extend_style || extendStyle), row: v }
                        this.setState({ extend_style: extend_style })
                      }}
                      value={this.state.extend_style.row || extendStyle.row}
                    >
                      <Option value="1">1个</Option>
                      <Option value="2">2个</Option>
                      <Option value="3">3个</Option>
                    </Select>
                  </div>

                  <div style={{position: 'relative', left: '-100px', top: '100px'}}>
                    宽高比例：
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      onChange={(v) => {
                        let extend_style = { ...(this.state.extend_style || extendStyle), widthHeight: v }
                        this.setState({ extend_style: extend_style })
                      }}
                      value={this.state.extend_style.widthHeight || extendStyle.widthHeight}
                    >
                      <Option value="1">1:1</Option>
                      <Option value="0.50">2:1</Option>
                      <Option value="0.67">3:2</Option>
                      <Option value="0.25">4:1</Option>
                      <Option value="0.75">4:3</Option>
                      <Option value="0.56">16:9</Option>
                    </Select>
                  </div>
                </FormItem>
              </Col>
              
              <Col span={2} style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label={"样式预览"}
                  style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div className="viewStyleMain">
                    {viewStyle}
                  </div>
                </FormItem>
              </Col>
              
              {/* <FormItem
                          {...formItemLayout}
                          label="样式选择"
                          style={chooseTemplate===1?{display:'none'}:{}}
                          >
                          <Select
                              defaultValue={provinceData[0]}
                              value={module_name}
                              style={{ width: 120,marginRight:'10px' }}
                              onChange={(value)=>handleProvinceChange(value)}
                              >
                              {provinceData.map(item =>{
                                  return (
                                      <Option key={item}>
                                      {item==='fcvideo'?'视频':item==='fcfind'?'服务':''}
                                      </Option>
                                  )
                              })}
                          </Select>
                          {getFieldDecorator('plate_module_id', chooseTemplate===2?{
                              rules: [{
                              required: true, message: '请选择样式',
                              }],
                          }:{})(
                              <TreeSelect
                                  style={{ width: 220 }}
                                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                  treeData={treeData}
                                  placeholder="请选择"
                                  treeDefaultExpandAll
                              />
                          )}
                          </FormItem> */}

              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠢᠯᠡᠷᠡᠬᠦ ᠡᠰᠡᠬᠦ : "
                >
                  {getFieldDecorator('is_show', {
                    initialValue: 1, rules: [{
                      required: true,
                    }],
                  })(
                    <RadioGroup>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={2}>ᠪᠢᠱᠢ</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
              </Col>
              
              <Col span={1}>
                <p className='mon_text' style={{ textAlign: 'center' }}><b>注：选择其他组件分类发布单将不会在本组件展示。</b></p>
              </Col>
              
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ : "
                >
                  <div mon_class='mon_select'>
                    {getFieldDecorator('pid', {
                      initialValue: '0',
                      rules: [{
                        required: true, message: '请选择层级',
                      }],
                    })(
                      // <Select disabled>
                      <Select>
                        <Option value="0">ᠨᠢᠭᠡᠳᠦᠭᠡᠷ ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ</Option>
                        {optionList.map((item, index) => {
                          return (
                            <Option key={index} disabled={item.disabled} value={item.plate_id}>{item.plate_name}</Option>
                          )
                        })}
                      </Select>
                    )}
                  </div>
                </FormItem>
              </Col>
              
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠭᠠᠳᠠᠷ ᠬᠣᠯᠪᠤᠭᠠᠰᠤ᠎ᠶᠢᠨ ᠬᠠᠶᠢᠭ : "
                  style={flag ? {} : { display: 'none' }}
                >
                  {getFieldDecorator('url', {})(
                    <Input mon_class='mon_input' />
                  )}
                </FormItem>
              </Col>
              
              <Col span={2}>
                <FormItem
                  {...formItemLayout}mon_class='mon_label'
                  label="ᠨᠢᠭᠤᠷ ᠪᠦᠷᠢ᠎ᠶᠢᠨ ᠢᠯᠡᠷᠡᠭᠦᠯᠬᠦ ᠲᠣᠭ᠎ᠠ : "
                >
                  {getFieldDecorator('page_size', {
                    initialValue: 10,
                    rules: [{
                      required: true, message: '请输入数字',
                    }],
                  })(
                    <Input mon_class='mon_input' />
                  )}
                </FormItem>
              </Col>

              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  className={flag ? '' : 'none'}
                  label="ᠡᠷᠬᠡ ᠣᠯᠭᠤᠵᠤ ᠦᠵᠡᠭᠦᠯᠬᠦ : "
                >
                  <div mon_class='mon_group'>
                    {getFieldDecorator('is_authorize', {
                      initialValue: 0,
                    })(
                      <RadioGroup disabled={formValue.pid != '0' || !!formValue.is_other} onChange={this.authorizeChange}>
                        <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                        <Radio value={0}>ᠪᠢᠱᠢ</Radio>
                      </RadioGroup>
                    )}
                    <br/>
                    <span style={{ position: 'relative', left: '-10px' }}>(ᠲᠠᠢᠯᠪᠤᠷᠢ᠄ ᠵᠥᠪᠬᠡᠨ ᠨᠢᠭᠡᠳᠦᠭᠡᠷ ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ᠎ᠶᠢᠨ ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ 《ᠡᠷᠬᠡ ᠣᠯᠭᠤᠯᠲᠠ᠎ᠪᠠᠷ ᠦᠵᠡᠬᠦ》ᠶᠢ ᠳᠠᠮᠵᠢᠨ᠎ᠠ )</span>
                  </div>
                </FormItem>
              </Col>
              
              {permission.indexOf('info_plate_backcolor') > -1 &&
                <Col span={2}>
                  <FormItem
                    {...formItemLayout}
                    mon_class='mon_label'
                    label="ᠳᠡᠪᠢᠰᠭᠡᠷ ᠥᠩᠭᠡ : "
                  >
                    {getFieldDecorator('back_color', {
                      initialValue: '#',
                    })(
                      <Input mon_class='mon_input'></Input>
                    )}
                  </FormItem>
                </Col>
              }

              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠳᠡᠪᠢᠰᠭᠡᠷ ᠵᠢᠷᠤᠭ : "
                >
                  {getFieldDecorator('icon', {
                    initialValue: `${UrlConfig}/application/fcpublic/resource/images/default.png`,
                  })(
                    <img style={{ width: "100%" }} onClick={() => {
                      fcUpload('icon', 'edit')
                    }} src={formValue.icon} className="plate-icon" alt="icon" />
                  )}
                </FormItem>
              </Col>
              
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  className={flag && formValue.is_authorize != 0 ? '' : 'none'}
                  mon_class='mon_label'
                  label="ᠡᠷᠬᠡ ᠣᠯᠭᠤᠬᠤ ᠨᠢᠭᠤᠴᠠ ᠲᠡᠮᠳᠡᠭ : "
                >
                  {getFieldDecorator('authorize_code')(
                    <Input mon_class='mon_input' disabled suffix={
                      <Popconfirm title="是否更新授权码？保存后版面原授权码将失效!" icon={null} onConfirm={this.random} onCancel={() => { }} okText="是" cancelText="否">
                        <a href="#">ᠱᠢᠨᠡᠳᠭᠡᠬᠦ</a>
                      </Popconfirm>
                    } />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      )
    }
  })


const AddForm = Form.create()(
  class extends React.Component {

    state = {
      extend_style: {
        row: 2,
        widthHeight: "1"
      },
      treeData: [],
      componentVal: 'live',
      zhibobanmian: [],
      currentTem: []
    }
    async componentDidMount() {
      const res = await getVideoPlateList();
      this.setState({ treeData: res.data.data })
      this.getBanminaList()
    }

    getBanminaList = async () => {
      if (this.props.configJson && this.props.configJson.saas_domain) {
        console.log(this.props.configJson.saas_domain, 'this.props.configJson.saas_domain');
        const { data: { code, data } } = await banmianList()
        if (code === 200) {
          this.setState({ zhibobanmian: data })
        }
      }

    }



    onChange = (...value) => {
      if (value[0] != '0') {
        this.props.form.setFieldsValue({
          is_authorize: 0
        })
      }
    }

    random = () => {
      this.props.form.setFieldsValue({
        authorize_code: random() + random()
      })
    }

    authorizeChange = () => {
      const formValue = this.props.form.getFieldsValue();
      if (!formValue.authorize_code) {
        setTimeout(() => {
          this.props.form.setFieldsValue({
            authorize_code: random() + random()
          })
        }, 300)
      }
    }
    handleComponentChange = (value) => {
      this.setState({ componentVal: value })
    }
    renderTreeNodes = data => {
      return data.map(item => {
        if (item.children) {
          return (
            <TreeNode value={item.plate_id} title={item.plate_name} key={item.plate_id} dataRef={item}>
              {this.renderTreeNodes(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode value={item.plate_id} key={item.plate_id} title={item.plate_name} {...item} />;
      })
    }
    render() {
      const { permission, optionList, visible, onCancel, onCreate, form, modalOption, chooseTemplate,
        changeTrmplate, treeData, provinceData, handleProvinceChange, configJson, fcUpload, versionJson } = this.props;


      const { getFieldDecorator } = form;
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };

      const formValue = this.props.form.getFieldsValue();
      let viewStyle = [];
      let { widthHeight: wh, row } = this.state.extend_style;
      let w = 100;
      if (row == 1) {
        w = w * 1;
      } else if (row == 2) {
        w = w * 0.5;
      } else if (row == 3) {
        w = w * 0.33;
      }
      for (let i = 0; i < row; i++) {
        viewStyle.push(<div key={i} className="viewStyle" style={{ height: w * wh, width: w }}></div>)
      }

      return (
        <Modal
          title='新建版面'
          visible={visible}
          onCancel={onCancel}
          onOk={onCreate}
          width={1100}
          footer={[
            <Button className='mon_btn' onClick={onCancel}>ᠬᠠᠭᠠᠬᠤ</Button>,
            <Button className='mon_btn' type="primary" onClick={onCreate}>ᠪᠠᠢᠭᠤᠯᠬᠤ</Button>
          ]}
        >
          <Form>
            <Row gutter={24}>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ"
                >
                  {getFieldDecorator('plate_name', {
                    rules: [{
                      required: true, message: '请输入版面名称',
                    }],
                  })(
                    <Input mon_class='mon_input' />
                  )}
                </FormItem>
              </Col>
              {  configJson && configJson.is_mengwen ?
                <Col span={2}>
                  <FormItem
                    {...formItemLayout}
                    mon_class='mon_label'
                    label="ᠮᠣᠩᠭᠤᠯ ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ"
                  >
                    {getFieldDecorator('sub_plate_name', {})(
                      <Input mon_class='mon_input' />
                    )}
                  </FormItem>
                </Col>
                  : null
              }
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠡᠷ᠎ᠡ ᠢᠯᠡᠷᠡᠭᠦ ᠡᠰᠡᠬᠥ"
              >
                  {getFieldDecorator('is_show_header', {
                    initialValue: 1,
                    rules: [{
                      required: true, message: '请选择是否显示版面名称',
                    }]
                  })(
                    <Radio.Group>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={0}>ᠪᠢᠰᠢ</Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠪᠤᠰᠤᠳ ᠲᠣᠨᠤᠭᠯᠠᠯ"
                >
                  {getFieldDecorator('is_other', {
                    initialValue: 0,
                    rules: [{
                      required: true,
                    }],
                  })(
                    <RadioGroup>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={0}>ᠪᠢᠰᠢ</Radio>
                      {/*<Radio value={2}>URL</Radio>*/}
                    </RadioGroup>
                  )}
                </FormItem>
              </Col>
              <Col span={2} style={formValue.is_other != 0 ? { display: 'none' } : {}}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠶᠠᠩᠵᠤ ᠰᠣᠩᠭᠤᠬᠤ : "
                  style={formValue.is_other != 0 ? { display: 'none' } : {}}
                >
                  <div mon_class='mon_select'>
                    {getFieldDecorator('template_id', {
                      rules: [{
                        required: !formValue.is_other, message: '请选择样式',
                      }],
                    })(
                      <Select>
                        {
                          modalOption.map((item, index) => {
                            return (
                              <Option key={index} value={item.template_id}>{item.template_name}</Option>
                            )
                          })
                        }
                      </Select>
                    )}
                  </div>
                </FormItem>
              </Col>
              <Col span={2} style={formValue.template_id == 17 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠥᠷᠭᠡᠨ ᠥᠨᠳᠦᠷ ᠬᠠᠷᠢᠴᠠᠯ᠄ "
                  style={formValue.template_id == 17 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div mon_class='mon_select'>
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      onChange={(v) => {
                        let extend_style = { ...this.state.extend_style, widthHeight: v }
                        this.setState({ extend_style })
                      }}
                      value={this.state.extend_style.widthHeight}
                    >
                      <Option value="1">1:1</Option>
                      <Option value="0.75">4:3</Option>
                      <Option value="0.56">16:9</Option>
                    </Select>
                  </div>
                </FormItem>
              </Col>
              <Col span={2} style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠮᠥᠷ ᠪᠦᠷᠢ᠎ᠶᠢᠨ ᠦᠵᠡᠭᠦᠯᠦᠯᠭᠡ :"
                  style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div mon_class='mon_select'>
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      onChange={(v) => {
                        let extend_style = { ...this.state.extend_style, row: v }
                        this.setState({ extend_style })
                      }}
                      value={this.state.extend_style.row}
                    >
                      <Option value="1">1个</Option>
                      <Option value="2">2个</Option>
                      <Option value="3">3个</Option>
                    </Select>
                  </div>

                  <div style={{position: 'relative', left: '-100px', top: '100px'}}>
                    宽高比例：
                    <div mon_class='mon_select'>
                      <Select
                        style={{ width: 120, marginRight: '10px' }}
                        onChange={(v) => {
                          let extend_style = { ...this.state.extend_style, widthHeight: v }
                          this.setState({ extend_style })
                        }}
                        value={this.state.extend_style.widthHeight}
                      >
                        <Option value="1">1:1</Option>
                        <Option value="0.50">2:1</Option>
                        <Option value="0.67">3:2</Option>
                        <Option value="0.25">4:1</Option>
                        <Option value="0.75">4:3</Option>
                        <Option value="0.56">16:9</Option>
                      </Select>
                    </div>
                  </div>
                </FormItem>
              </Col>
              <Col span={2} style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label={"样式预览"}
                  style={formValue.template_id == 9 && formValue.is_other !== 1 ? {} : { display: 'none' }}
                >
                  <div className="viewStyleMain">
                    {viewStyle}
                  </div>
                </FormItem>
              </Col>
              <Col span={2} style={formValue.is_other != 1 ? { display: 'none' } : {}}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label={"组件选择"}
                  style={formValue.is_other != 1 ? { display: 'none' } : {}}
                >
                  {getFieldDecorator('other_component', {
                    initialValue: 'live',
                    rules: [{
                      required: !!formValue.is_other, message: '请选择组件',
                    }]
                  })(
                    <Select
                      onChange={this.handleComponentChange}
                      style={{ width: 120, marginRight: '10px' }}
                    >
                      <Option key={'live'}>直播</Option>
                      <Option key={'matrixRecommend'}>矩阵号推荐</Option>
                      <Option key={'matrixFollow'}>矩阵号关注</Option>
                      {/* <Option key={'matrixShortVideo'}>矩阵号短视频</Option> */}
                      <Option key={'matrixShortVideo'} style={{ display: versionJson.list.indexOf('short_video') > -1 ? 'block' : 'none' }}>矩阵号短视频</Option>
                      <Option key={'video'}>视频</Option>
                      <Option key={'recommend'}>智能推荐</Option>
                      <Option key={'matrixMap'} style={{ display: permission.indexOf('info_matrix_map') > -1 ? 'block' : 'none' }}>矩阵号地图</Option>
                      <Option key={'regionalRecommend'} style={{ display: permission.indexOf('info_lbs') > -1 ? 'block' : 'none' }}>地域推荐</Option>
                      <Option key={'industryPlate'}>行业版面</Option>
                      <Option key={'govermentPlate'}>政企号版面</Option>
                      <Option key={'matrixMain'}>云媒体号</Option>
                      <Option key={'pointLive'}>点直播版面</Option>
                    </Select>
                  )}
                  <div>注：选择其他组件后版面内容不在资讯组件管理。</div>
                </FormItem>
              </Col>
              <Col span={2} style={formValue.other_component != 'live' || formValue.is_other != 1 ? { display: 'none' } : {}}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label={"直播版面"}
                  style={formValue.other_component != 'live' || formValue.is_other != 1 ? { display: 'none' } : {}}
                >
                  {getFieldDecorator('other_plate_id', {
                    initialValue: undefined,
                    rules: [{
                      required: !!formValue.other_plate_id, message: '请选择直播版面',
                    }]
                  })(
                    <Select
                      style={{ width: 120, marginRight: '10px' }}
                      placeholder="请选择"
                    >
                      {this.state.zhibobanmian.map((i) => (
                        <Option key={i.id} value={i.id}>{i.name}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              {
                this.state.componentVal === 'video' || this.state.componentVal === 'pointLive' ? 
                <Col span={2}>
                  <FormItem
                    {...formItemLayout}
                    label="视频版面"
                  >
                    {getFieldDecorator('other_plate_id', {
                      initialValue: null,
                      rules: [{
                        required: true,
                      }],
                    })(
                      <TreeSelect
                        showSearch
                        style={{ width: '100%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择视频版面"
                        allowClear
                        treeDefaultExpandAll
                        treeNodeFilterProp="plate_name"
                      >
                        {this.renderTreeNodes(this.state.treeData)}
                      </TreeSelect>
                    )}
                  </FormItem>
                </Col>
                : null
              }
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠢᠯᠡᠷᠡᠬᠦ ᠡᠰᠡᠬᠥ ᠄ "
                >
                  {getFieldDecorator('is_show', {
                    initialValue: 1, rules: [{
                      required: true,
                    }],
                  })(
                    <RadioGroup >
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={2}>ᠪᠢᠰᠢ</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ : "
                >
                  <div mon_class='mon_select'>
                    {getFieldDecorator('pid', {
                      initialValue: '0',
                      rules: [{
                        required: true, message: '请选择层级',
                      }],
                    })(
                      <Select onChange={this.onChange} disabled={!!formValue.is_other}>
                        <Option value="0">ᠨᠢᠭᠡᠳᠦᠭᠡᠷ ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ</Option>
                        {optionList.map((item, index) => {
                          return (
                            <Option key={index} disabled={item.disabled} value={item.plate_id}>{item.plate_name}</Option>
                          )
                        })}
                      </Select>
                    )}
                  </div>
                </FormItem>
              </Col>
              {formValue.pid == 0 ?
                <Col span={2}>
                  <FormItem
                    {...formItemLayout}
                    mon_class='mon_label'
                    label="ᠭᠠᠳᠠᠷ ᠬᠣᠯᠪᠤᠭᠠᠰᠤ᠎ᠶᠢᠨ ᠬᠠᠶᠢᠭ : "
                  >
                    {getFieldDecorator('url', {})(
                      <Input mon_class='mon_input' />
                    )}
                  </FormItem>
                </Col>
                : ''
              }
              <Col span={2} style={(formValue.template_id == 19 && formValue.is_other != 1) ? { display: 'none' } : {}}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠨᠢᠭᠤᠷ ᠪᠦᠷᠢ᠎ᠶᠢᠨ ᠢᠯᠡᠷᠡᠭᠦᠯᠬᠦ ᠲᠣᠭ᠎ᠠ : "
                  style={(formValue.template_id == 19 && formValue.is_other != 1) ? { display: 'none' } : {}}
                >
                  {getFieldDecorator('page_size', {
                    initialValue: 10,
                    rules: [{
                      required: true, message: '请输入数字',
                    }],
                  })(
                    <Input mon_class='mon_input' />
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠡᠷᠬᠡ ᠣᠯᠭᠤᠵᠤ ᠦᠵᠡᠭᠦᠯᠬᠦ : "
                >
                  {getFieldDecorator('is_authorize', {
                    initialValue: 0,
                  })(
                    <RadioGroup disabled={formValue.pid != '0' || !!formValue.is_other} onChange={this.authorizeChange}>
                      <Radio value={1}>ᠲᠡᠢᠮᠦ</Radio>
                      <Radio value={0}>ᠪᠢᠰᠢ</Radio>
                    </RadioGroup>
                  )}
                  <br/>
                  <span style={{marginTop: '10px', position: 'relative', left: '-10px'}}>(ᠲᠠᠢᠯᠪᠤᠷᠢ᠄ ᠵᠥᠪᠬᠡᠨ ᠨᠢᠭᠡᠳᠦᠭᠡᠷ ᠳᠠᠪᠬᠤᠷᠭ᠎ᠠ᠎ᠶᠢᠨ ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠨᠢᠭᠤᠷ 《ᠡᠷᠬᠡ ᠣᠯᠭᠤᠯᠲᠠ᠎ᠪᠠᠷ ᠦᠵᠡᠬᠦ》ᠶᠢ ᠳᠠᠮᠵᠢᠨ᠎ᠠ )</span>
                </FormItem>
              </Col>
              {permission.indexOf('info_plate_backcolor') > -1 &&
                <Col span={2}>
                  <FormItem
                    {...formItemLayout}
                    mon_class='mon_label'
                    label="ᠳᠡᠪᠢᠰᠭᠡᠷ ᠥᠩᠭᠡ : "
                  >
                    {getFieldDecorator('back_color', {
                      initialValue: '#',
                    })(
                      <Input mon_class='mon_input'></Input>
                    )}
                  </FormItem>
                </Col>
              }
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠳᠡᠪᠢᠰᠭᠡᠷ ᠵᠢᠷᠤᠭ : "
                >
                  {getFieldDecorator('icon', {
                    initialValue: `${UrlConfig}/application/fcpublic/resource/images/default.png`,
                  })(
                    <img style={{ width: "100%", marginLeft: '10px' }} onClick={() => {

                      fcUpload('icon', 'add')
                    }} src={formValue.icon} className="plate-icon" alt="icon" />
                  )}
                </FormItem>
              </Col>
              <Col span={2}>
                <FormItem
                  {...formItemLayout}
                  mon_class='mon_label'
                  label="ᠡᠷᠬᠡ ᠣᠯᠭᠤᠬᠤ ᠨᠢᠭᠤᠴᠠ ᠲᠡᠮᠳᠡᠭ : "
                  className={formValue.is_authorize == 0 ? 'none' : ''}
                >
                  {getFieldDecorator('authorize_code')(
                    <Input mon_class='mon_input' disabled suffix={<a onClick={this.random}>ᠱᠢᠨᠡᠳᠭᠡᠬᠦ</a>} />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      )
    }
  })
